<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table</title>

<!-- 组件样式（全部的） -->
<link rel="stylesheet" href="../../dist/tdesign.css">
<!--
  TDesign 图标库，桌面端与移动端用同样的资源
  使用方式：<i class="t-icon t-icon-prompt-fill"></i>
-->
<link rel="stylesheet" href="https://tdesign.gtimg.com/icon/0.0.3/fonts/index.css">
</head>
<body>
<div class="tdesign-demo-wrap">
  <!-- 开发者信息 -->
  <div class="tdesign-demo-wrap__name">
    <h1 class="">Table</h1>
    <p class="tdesign-demo-wrap__info">开发者：cache</p>
    <p class="tdesign-demo-wrap__info">创建日期：2020-06-07</p>
    <p class="tdesign-demo-wrap__info">说明：TDesign Table 组件样式</p>
  </div>

  <!-- 基础表格 -->
  <div class="tdesign-demo-item tdesign-demo-item--table">
    <h2 class="tdesign-demo-item__title">1.1.1 基础表格</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-table">
          <div class="t-table-content">
            <table>
              <thead>
                <tr>
                  <th>项目名称</th>
                  <th>管理员</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 边框线表格 -->
  <div class="tdesign-demo-item tdesign-demo-item--table">
    <h2 class="tdesign-demo-item__title">1.2.1 边框线表格</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-table t-table--bordered">
          <div class="t-table-content">
            <table>
              <thead>
                <tr>
                  <th>项目名称</th>
                  <th>管理员</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 斑马线表格 -->
  <div class="tdesign-demo-item tdesign-demo-item--table">
    <h2 class="tdesign-demo-item__title">1.2.2 斑马线表格</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-table t-table--striped">
          <div class="t-table-content">
            <table>
              <thead>
                <tr>
                  <th>项目名称</th>
                  <th>管理员</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 表头固定表格 -->
  <div class="tdesign-demo-item tdesign-demo-item--table">
    <h2 class="tdesign-demo-item__title">1.3.1 表头固定表格</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-table t-table__header--fixed">
          <div class="t-table-content">
            <div class="t-table__header">
              <table>
                <thead>
                  <tr>
                    <th>项目名称</th>
                    <th>管理员</th>
                    <th>操作</th>
                  </tr>
                </thead>
              </table>
            </div>
            <div class="t-table__body" style="max-height: 200px;">
              <table>
                <tbody>
                  <tr>
                    <td>TDesign</td>
                    <td>admin</td>
                    <td>
                      <a href="javascript:;">管理</a>
                      <a href="javascript:;">删除</a>
                    </td>
                  </tr>
                  <tr>
                    <td>TDesign</td>
                    <td>admin</td>
                    <td>
                      <a href="javascript:;">管理</a>
                      <a href="javascript:;">删除</a>
                    </td>
                  </tr>
                  <tr>
                    <td>TDesign</td>
                    <td>admin</td>
                    <td>
                      <a href="javascript:;">管理</a>
                      <a href="javascript:;">删除</a>
                    </td>
                  </tr>
                  <tr>
                    <td>TDesign</td>
                    <td>admin</td>
                    <td>
                      <a href="javascript:;">管理</a>
                      <a href="javascript:;">删除</a>
                    </td>
                  </tr>
                  <tr>
                    <td>TDesign</td>
                    <td>admin</td>
                    <td>
                      <a href="javascript:;">管理</a>
                      <a href="javascript:;">删除</a>
                    </td>
                  </tr>
                  <tr>
                    <td>TDesign</td>
                    <td>admin</td>
                    <td>
                      <a href="javascript:;">管理</a>
                      <a href="javascript:;">删除</a>
                    </td>
                  </tr>
                  <tr>
                    <td>TDesign</td>
                    <td>admin</td>
                    <td>
                      <a href="javascript:;">管理</a>
                      <a href="javascript:;">删除</a>
                    </td>
                  </tr>
                  <tr>
                    <td>TDesign</td>
                    <td>admin</td>
                    <td>
                      <a href="javascript:;">管理</a>
                      <a href="javascript:;">删除</a>
                    </td>
                  </tr>
                  <tr>
                    <td>TDesign</td>
                    <td>admin</td>
                    <td>
                      <a href="javascript:;">管理</a>
                      <a href="javascript:;">删除</a>
                    </td>
                  </tr>
                  <tr>
                    <td>TDesign</td>
                    <td>admin</td>
                    <td>
                      <a href="javascript:;">管理</a>
                      <a href="javascript:;">删除</a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <p class="tdesign-demo-message">注: header 和 body 用两个 table 实现的，要注意列宽统一的问题</p>
    </div>
  </div>
  <!-- 列固定表格 -->
  <div class="tdesign-demo-item tdesign-demo-item--table">
    <h2 class="tdesign-demo-item__title">1.3.2 列固定表格</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-table t-table--bordered t-table__cell--fixed t-table--has-fixed">
          <div class="t-table-content">
            <table style="width: 2000px;">
              <thead>
                <tr>
                  <th
                    class="t-table__cell--fixed-left t-table__cell--fixed-left-last"
                    style="position: sticky; left: 0;"
                  >项目名称</th>
                  <th>管理员</th>
                  <th>管理员</th>
                  <th>管理员</th>
                  <th>管理员</th>
                  <th>管理员</th>
                  <th>管理员</th>
                  <th>管理员</th>
                  <th>管理员</th>
                  <th>管理员</th>
                  <th>管理员</th>
                  <th>管理员</th>
                  <th>管理员</th>
                  <th>管理员</th>
                  <th>管理员</th>
                  <th>管理员</th>
                  <th>管理员</th>
                  <th>管理员</th>
                  <th>管理员</th>
                  <th
                    class="t-table__cell--fixed-right t-table__cell--fixed-right-first"
                    style="position: sticky; right: 0;"
                  >操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td
                    class="t-table__cell--fixed-left t-table__cell--fixed-left-last"
                    style="position: sticky; left: 0;"
                  >TDesign</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td
                    class="t-table__cell--fixed-right t-table__cell--fixed-right-first"
                    style="position: sticky; right: 0;"
                  >
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td
                    class="t-table__cell--fixed-left t-table__cell--fixed-left-last"
                    style="position: sticky; left: 0;"
                  >TDesign</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td
                    class="t-table__cell--fixed-right t-table__cell--fixed-right-first"
                    style="position: sticky; right: 0;"
                  >
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td
                    class="t-table__cell--fixed-left t-table__cell--fixed-left-last"
                    style="position: sticky; left: 0;"
                  >TDesign</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td
                    class="t-table__cell--fixed-right t-table__cell--fixed-right-first"
                    style="position: sticky; right: 0;"
                  >
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td
                    class="t-table__cell--fixed-left t-table__cell--fixed-left-last"
                    style="position: sticky; left: 0;"
                  >TDesign</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td
                    class="t-table__cell--fixed-right t-table__cell--fixed-right-first"
                    style="position: sticky; right: 0;"
                  >
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td
                    class="t-table__cell--fixed-left t-table__cell--fixed-left-last"
                    style="position: sticky; left: 0;"
                  >TDesign</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td
                    class="t-table__cell--fixed-right t-table__cell--fixed-right-first"
                    style="position: sticky; right: 0;"
                  >
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 多列固定表格 -->
  <div class="tdesign-demo-item tdesign-demo-item--table">
    <h2 class="tdesign-demo-item__title">1.3.3 多列固定表格</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-table t-table__cell--fixed t-table--has-fixed">
          <div class="t-table-content">
            <table style="width: 2000px;">
              <thead>
                <tr>
                  <th
                    class="t-table__cell--fixed-left"
                    style="position: sticky; left: 0;"
                  >项目名称</th>
                  <th
                    class="t-table__cell--fixed-left t-table__cell--fixed-left-last"
                    style="position: sticky; left: 100px;"
                  >管理员</th>
                  <th>管理员</th>
                  <th>管理员</th>
                  <th>管理员</th>
                  <th>管理员</th>
                  <th>管理员</th>
                  <th>管理员</th>
                  <th>管理员</th>
                  <th>管理员</th>
                  <th>管理员</th>
                  <th>管理员</th>
                  <th>管理员</th>
                  <th>管理员</th>
                  <th>管理员</th>
                  <th>管理员</th>
                  <th>管理员</th>
                  <th>管理员</th>
                  <th
                    class="t-table__cell--fixed-right t-table__cell--fixed-right-first"
                    style="position: sticky; right: 100px;"
                  >管理员</th>
                  <th
                    class="t-table__cell--fixed-right"
                    style="position: sticky; right: 0;"
                  >操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td
                    class="t-table__cell--fixed-left"
                    style="position: sticky; left: 0;"
                  >TDesign</td>
                  <td
                    class="t-table__cell--fixed-left t-table__cell--fixed-left-last"
                    style="position: sticky; left: 100px;"
                  >admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td
                    class="t-table__cell--fixed-right t-table__cell--fixed-right-first"
                    style="position: sticky; right: 100px;"
                  >admin</td>
                  <td
                    class="t-table__cell--fixed-right"
                    style="position: sticky; right: 0;"
                  >
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td
                    class="t-table__cell--fixed-left"
                    style="position: sticky; left: 0;"
                  >TDesign</td>
                  <td
                    class="t-table__cell--fixed-left t-table__cell--fixed-left-last"
                    style="position: sticky; left: 100px;"
                  >admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td
                    class="t-table__cell--fixed-right t-table__cell--fixed-right-first"
                    style="position: sticky; right: 100px;"
                  >admin</td>
                  <td
                    class="t-table__cell--fixed-right"
                    style="position: sticky; right: 0;"
                  >
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td
                    class="t-table__cell--fixed-left"
                    style="position: sticky; left: 0;"
                  >TDesign</td>
                  <td
                    class="t-table__cell--fixed-left t-table__cell--fixed-left-last"
                    style="position: sticky; left: 100px;"
                  >admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td
                    class="t-table__cell--fixed-right t-table__cell--fixed-right-first"
                    style="position: sticky; right: 100px;"
                  >admin</td>
                  <td
                    class="t-table__cell--fixed-right"
                    style="position: sticky; right: 0;"
                  >
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td
                    class="t-table__cell--fixed-left"
                    style="position: sticky; left: 0;"
                  >TDesign</td>
                  <td
                    class="t-table__cell--fixed-left t-table__cell--fixed-left-last"
                    style="position: sticky; left: 100px;"
                  >admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td
                    class="t-table__cell--fixed-right t-table__cell--fixed-right-first"
                    style="position: sticky; right: 100px;"
                  >admin</td>
                  <td
                    class="t-table__cell--fixed-right"
                    style="position: sticky; right: 0;"
                  >
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td
                    class="t-table__cell--fixed-left"
                    style="position: sticky; left: 0;"
                  >TDesign</td>
                  <td
                    class="t-table__cell--fixed-left t-table__cell--fixed-left-last"
                    style="position: sticky; left: 100px;"
                  >admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td
                    class="t-table__cell--fixed-right t-table__cell--fixed-right-first"
                    style="position: sticky; right: 100px;"
                  >admin</td>
                  <td
                    class="t-table__cell--fixed-right"
                    style="position: sticky; right: 0;"
                  >
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 表头固定和列固定 -->
  <div class="tdesign-demo-item tdesign-demo-item--table">
    <h2 class="tdesign-demo-item__title">1.3.4 表头固定和列固定表格</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-table t-table--bordered t-table__header--fixed t-table__cell--fixed t-table--has-fixed">
          <div class="t-table-content">
            <div class="t-table__header">
              <table style="width: 2000px;">
                <thead>
                  <tr>
                    <th
                      class="t-table__cell--fixed-left t-table__cell--fixed-left-last"
                      style="position: sticky; left: 0;"
                    >项目名称</th>
                    <th>管理员</th>
                    <th>管理员</th>
                    <th>管理员</th>
                    <th>管理员</th>
                    <th>管理员</th>
                    <th>管理员</th>
                    <th>管理员</th>
                    <th>管理员</th>
                    <th>管理员</th>
                    <th>管理员</th>
                    <th>管理员</th>
                    <th>管理员</th>
                    <th>管理员</th>
                    <th>管理员</th>
                    <th>管理员</th>
                    <th>管理员</th>
                    <th>管理员</th>
                    <th>管理员</th>
                    <th
                      class="t-table__cell--fixed-right t-table__cell--fixed-right-first"
                      style="position: sticky; right: 0;"
                    >操作</th>
                  </tr>
                </thead>
              </table>
            </div>
            <div class="t-table__body" style="max-height: 199px;">
              <table style="width: 2000px;">
                <tbody>
                  <tr>
                    <td
                      class="t-table__cell--fixed-left t-table__cell--fixed-left-last"
                      style="position: sticky; left: 0;"
                    >TDesign</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td
                      class="t-table__cell--fixed-right t-table__cell--fixed-right-first"
                      style="position: sticky; right: 0;"
                    >
                      <a href="javascript:;">管理</a>
                      <a href="javascript:;">删除</a>
                    </td>
                  </tr>
                  <tr>
                    <td
                      class="t-table__cell--fixed-left t-table__cell--fixed-left-last"
                      style="position: sticky; left: 0;"
                    >TDesign</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td
                      class="t-table__cell--fixed-right t-table__cell--fixed-right-first"
                      style="position: sticky; right: 0;"
                    >
                      <a href="javascript:;">管理</a>
                      <a href="javascript:;">删除</a>
                    </td>
                  </tr>
                  <tr>
                    <td
                      class="t-table__cell--fixed-left t-table__cell--fixed-left-last"
                      style="position: sticky; left: 0;"
                    >TDesign</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td
                      class="t-table__cell--fixed-right t-table__cell--fixed-right-first"
                      style="position: sticky; right: 0;"
                    >
                      <a href="javascript:;">管理</a>
                      <a href="javascript:;">删除</a>
                    </td>
                  </tr>
                  <tr>
                    <td
                      class="t-table__cell--fixed-left t-table__cell--fixed-left-last"
                      style="position: sticky; left: 0;"
                    >TDesign</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td
                      class="t-table__cell--fixed-right t-table__cell--fixed-right-first"
                      style="position: sticky; right: 0;"
                    >
                      <a href="javascript:;">管理</a>
                      <a href="javascript:;">删除</a>
                    </td>
                  </tr>
                  <tr>
                    <td
                      class="t-table__cell--fixed-left t-table__cell--fixed-left-last"
                      style="position: sticky; left: 0;"
                    >TDesign</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td
                      class="t-table__cell--fixed-right t-table__cell--fixed-right-first"
                      style="position: sticky; right: 0;"
                    >
                      <a href="javascript:;">管理</a>
                      <a href="javascript:;">删除</a>
                    </td>
                  </tr>
                  <tr>
                    <td
                      class="t-table__cell--fixed-left t-table__cell--fixed-left-last"
                      style="position: sticky; left: 0;"
                    >TDesign</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td>admin</td>
                    <td
                      class="t-table__cell--fixed-right t-table__cell--fixed-right-first"
                      style="position: sticky; right: 0;"
                    >
                      <a href="javascript:;">管理</a>
                      <a href="javascript:;">删除</a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <p class="tdesign-demo-message">注: 表头固定和列固定同时启用时，header 和 body 是用两个 table 实现的。并且 table 部分配置了 overflow: hidden; 隐藏横向滚动条，横向滚动 body 是需要同步 header 的滚动位置</p>
    </div>
  </div>
  <!-- 展开收起表格 -->
  <div class="tdesign-demo-item tdesign-demo-item--table">
    <h2 class="tdesign-demo-item__title">1.4.1 展开收起表格</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-table">
          <div class="t-table-content">
            <table style="table-layout: auto;">
              <colgroup>
                <col class="t-table-expandable-icon-cell">
              </colgroup>
              <thead>
                <tr>
                  <th></th>
                  <th>项目名称</th>
                  <th>管理员</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <i class="t-icon t-icon-arrow-down"></i>
                  </td>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>
                    <i class="t-icon t-icon-arrow-down"></i>
                  </td>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td colspan="4">
                    <div>自定义展开行内容</div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <i class="t-icon t-icon-arrow-down"></i>
                  </td>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <p class="tdesign-demo-message">注: icon 待补齐</p>
    </div>
  </div>
  <!-- 行列合并表格 -->
  <div class="tdesign-demo-item tdesign-demo-item--table">
    <h2 class="tdesign-demo-item__title">1.5.1 行列合并表格</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-table t-table--bordered">
          <div class="t-table-content">
            <table>
              <thead>
                <tr>
                  <th>项目名称</th>
                  <th>管理员</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td rowspan="2">admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td colspan="2">TDesign</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 可调整列宽表格 -->
  <div class="tdesign-demo-item tdesign-demo-item--table">
    <h2 class="tdesign-demo-item__title">1.6.1 可调整列宽表格</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-table t-table--bordered">
          <div class="t-table-content">
            <table>
              <thead>
                <tr>
                  <th class="t-table__cell--resizable">
                    项目名称
                    <span class="t-table__cell--resizer"></span>
                  </th>
                  <th class="t-table__cell--resizable">
                    管理员
                    <span class="t-table__cell--resizer"></span>
                  </th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 多级表头表格 -->
  <div class="tdesign-demo-item tdesign-demo-item--table">
    <h2 class="tdesign-demo-item__title">1.7.1 多级表头表格</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-table t-table--bordered">
          <div class="t-table-content">
            <table>
              <thead>
                <tr>
                  <th>项目名称</th>
                  <th colspan="2">管理员</th>
                  <th rowspan="2">管理员</th>
                  <th>操作</th>
                </tr>
                <tr>
                  <th>项目名称</th>
                  <th>管理员</th>
                  <th>管理员</th>
                  <th>操作</th>
                </tr>
                <tr>
              </thead>
              <tbody>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 可拖动排序表格 -->
  <div class="tdesign-demo-item tdesign-demo-item--table">
    <h2 class="tdesign-demo-item__title">1.8.1 可拖动排序表格</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-table">
          <div class="t-table-content">
            <table style="table-layout: auto;">
              <colgroup>
                <col class="t-table-draggable-icon-cell">
              </colgroup>
              <thead>
                <tr>
                  <th></th>
                  <th>项目名称</th>
                  <th>管理员</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr draggable="true">
                  <td>
                    <i class="t-icon t-icon-more"></i>
                  </td>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr draggable="true">
                  <td>
                    <i class="t-icon t-icon-more"></i>
                  </td>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr draggable="true">
                  <td>
                    <i class="t-icon t-icon-more"></i>
                  </td>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <p class="tdesign-demo-message">注: icon 待补齐，列拖拽 @todo</p>
    </div>
  </div>
  <!-- 可选择数据行 -->
  <div class="tdesign-demo-item tdesign-demo-item--table">
    <h2 class="tdesign-demo-item__title">1.9.1 可选择数据行 - 单选</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-table">
          <div class="t-table-content">
            <table>
              <colgroup>
                <col class="t-table-selection-cell">
              </colgroup>
              <thead>
                <tr>
                  <th></th>
                  <th>项目名称</th>
                  <th>管理员</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <label class="t-radio">
                      <input type="radio" class="t-radio__former" value="">
                      <span class="t-radio__input"></span>
                    </label>
                  </td>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>
                    <label class="t-radio">
                      <input type="radio" class="t-radio__former" value="">
                      <span class="t-radio__input"></span>
                    </label>
                  </td>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>
                    <label class="t-radio">
                      <input type="radio" class="t-radio__former" value="">
                      <span class="t-radio__input"></span>
                    </label>
                  </td>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="tdesign-demo-item tdesign-demo-item--table">
    <h2 class="tdesign-demo-item__title">1.9.2 可选择数据行 - 多选</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-table">
          <div class="t-table-content">
            <table>
              <colgroup>
                <col class="t-table-selection-cell">
              </colgroup>
              <thead>
                <tr>
                  <th>
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                  </th>
                  <th>项目名称</th>
                  <th>管理员</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                  </td>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                  </td>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>
                    <label class="t-checkbox">
                      <input type="checkbox" class="t-checkbox__former" value="">
                      <span class="t-checkbox__input"></span>
                    </label>
                  </td>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 紧凑型表格 -->
  <div class="tdesign-demo-item tdesign-demo-item--table">
    <h2 class="tdesign-demo-item__title">2.1.1 紧凑型表格</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-table t-size-s">
          <div class="t-table-content">
            <table>
              <thead>
                <tr>
                  <th>项目名称</th>
                  <th>管理员</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 标准型表格 -->
  <div class="tdesign-demo-item tdesign-demo-item--table">
    <h2 class="tdesign-demo-item__title">2.1.2 标准型表格</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-table">
          <div class="t-table-content">
            <table>
              <thead>
                <tr>
                  <th>项目名称</th>
                  <th>管理员</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 宽松型表格 -->
  <div class="tdesign-demo-item tdesign-demo-item--table">
    <h2 class="tdesign-demo-item__title">2.1.3 宽松型表格</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-table t-size-l">
          <div class="t-table-content">
            <table>
              <thead>
                <tr>
                  <th>项目名称</th>
                  <th>管理员</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 可悬停表格 -->
  <div class="tdesign-demo-item tdesign-demo-item--table">
    <h2 class="tdesign-demo-item__title">3.1.1.1 数据行 hover 态</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-table t-table--hoverable">
          <div class="t-table-content">
            <table>
              <thead>
                <tr>
                  <th>项目名称</th>
                  <th>管理员</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="tdesign-demo-item tdesign-demo-item--table">
    <h2 class="tdesign-demo-item__title">3.1.1.2 斑马线表格数据行 hover 态</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-table t-table--striped t-table--hoverable">
          <div class="t-table-content">
            <table>
              <thead>
                <tr>
                  <th>项目名称</th>
                  <th>管理员</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 列高亮 -->
  <div class="tdesign-demo-item tdesign-demo-item--table">
    <h2 class="tdesign-demo-item__title">3.1.1.3 数据列突出显示</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-table">
          <div class="t-table-content">
            <table>
              <thead>
                <tr>
                  <th>项目名称</th>
                  <th class="t-table__cell--highlight">管理员</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>TDesign</td>
                  <td class="t-table__cell--highlight">admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td class="t-table__cell--highlight">admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td class="t-table__cell--highlight">admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <p class="tdesign-demo-message">注: 需实现动态交互效果</p>
    </div>
  </div>
  <!-- 表格元素 hover 态 -->
  <div class="tdesign-demo-item tdesign-demo-item--table">
    <h2 class="tdesign-demo-item__title">3.1.2 表格常见元素 hover 态</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-table">
          <div class="t-table-content">
            <table>
              <thead>
                <tr>
                  <th>
                    <div class="t-table__cell--sortable">
                      <div class="t-table__cell--title">
                        <div>项目名称</div>
                        <div class="t-table__cell--filter">
                          <i class="t-icon t-icon-filter"></i>
                        </div>
                      </div>
                      <div class="t-table__cell--sort-trigger">
                        <i class="t-icon t-icon-sort-default"></i>
                      </div>
                    </div>
                  </th>
                  <th>管理员</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 数据行禁用 -->
  <div class="tdesign-demo-item tdesign-demo-item--table">
    <h2 class="tdesign-demo-item__title">3.1.3 数据行不可编辑</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-table">
          <div class="t-table-content">
            <table>
              <thead>
                <tr>
                  <th>项目名称</th>
                  <th>管理员</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr class="t-table__row--disabled">
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 文本顶端对齐 -->
  <div class="tdesign-demo-item tdesign-demo-item--table">
    <h2 class="tdesign-demo-item__title">3.3.1 文本顶端对齐</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-table t-table-valign__top">
          <div class="t-table-content">
            <table>
              <thead>
                <tr>
                  <th>项目名称</th>
                  <th>管理员</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <p>TDesign</p>
                    <p>TDesign</p>
                  </td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 表格加载态 -->
  <div class="tdesign-demo-item tdesign-demo-item--table">
    <h2 class="tdesign-demo-item__title">3.4.1 刷新加载</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-table">
          <div class="t-table-content">
            <table>
              <thead>
                <tr>
                  <th>项目名称</th>
                  <th>管理员</th>
                  <th>操作</th>
                </tr>
              </thead>
            </table>
            <div class="t-table--loading">
              <div class="t-table--loading-progressbar"></div>
              <div class="t-table--loading-message">
                <p>正在加载中，请稍候</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="tdesign-demo-item tdesign-demo-item--table">
    <h2 class="tdesign-demo-item__title">3.4.2 异步加载</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-table">
          <div class="t-table-content">
            <table>
              <thead>
                <tr>
                  <th>项目名称</th>
                  <th>管理员</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
              </tbody>
              <tfoot>
                <tr>
                  <td colspan="3">
                    <div class="t-table--loading-async">
                      <i class="t-icon t-icon-spinner"></i>
                      正在加载中，请稍候
                    </div>
                  </td>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 带分页表格 -->
  <div class="tdesign-demo-item tdesign-demo-item--table">
    <h2 class="tdesign-demo-item__title">带分页表格</h2>
    <div class="tdesign-demo-item__body">
      <div class="tdesign-demo-block">
        <div class="t-table">
          <div class="t-table-content">
            <table>
              <thead>
                <tr>
                  <th>项目名称</th>
                  <th>管理员</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>TDesign</td>
                  <td>admin</td>
                  <td>
                    <a href="javascript:;">管理</a>
                    <a href="javascript:;">删除</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="t-table-pagination">
            <div class="t-pagination ">
              <div class="t-pagination__total">共 658 项数据</div>
              <div class="t-pagination__btn t-pagination__btn--prev">
                <i class="t-icon t-icon-demo"></i>
              </div>
              <ul class="t-pagination__pager">
                <li class="t-pagination__number">1</li>
                <li class="t-pagination__number t-pagination__number--more"><i class="t-icon t-icon-demo"></i></li>
                <li class="t-pagination__number">50</li>
                <li class="t-pagination__number t-is-current">51</li>
                <li class="t-pagination__number">52</li>
                <li class="t-pagination__number">53</li>
                <li class="t-pagination__number">54</li>
                <li class="t-pagination__number t-pagination__number--more"><i class="t-icon t-icon-demo"></i></li>
                <li class="t-pagination__number">90</li>
              </ul>
              <div class="t-pagination__btn t-pagination__btn--next">
                <i class="t-icon t-icon-demo"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>